<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-26 11:16:35
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-07 16:08:55
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\dept\dept-honor.vue
-->
<template>
  <div class="component-container">
    <div class="flex-table">
      <el-table :data="workList" border style="width: 100%" height="100%" v-loading="loading">
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="获得荣誉日期" prop="matterDate" width="170" align="center"></el-table-column>
        <el-table-column label="荣誉类型" prop="honorTypeDictName" min-width="140" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="说明描述" prop="describe" min-width="180" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="依据材料" align="center" min-width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.materialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.materialUrls.split(',')"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button type="text" @click="handlePreviewFile(url)" class="file-preview-btn">
                  {{ formatFileUrl(url)['name'] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="申请日期" prop="applyDate" width="160" align="center"></el-table-column>
        <el-table-column label="申请站办所" prop="deptName" min-width="140" align="center" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
  </div>
</template>

<script>
import { list } from '@/api/work/dept-honor'
import FilePreview from '@/components/FilePreview'
import { mixins } from '@/mixins'
export default {
  name: 'performance-inventory_dept_dept-honor',
  mixins: [mixins],
  dicts: ['biz_dept_year_honor_type'],
  props: {
    queryForm: {
      type: Object,
      default: () => {}
    }
  },
  components: { FilePreview },
  data() {
    return {
      filePreviewVisible: false,
      previewFile: {},
      columns: [],
      loading: false,
      workList: [],
      queryParams: {}
    }
  },
  computed: {},
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        this.queryParams = { ...this.queryParams, ...query }
        this.getList()
      }
    }
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    getList() {
      this.loading = true
      list(this.queryParams)
        .then(res => {
          this.loading = false
          this.workList = res.rows
        })
        .catch(err => (this.loading = false))
    },
    // 刷新
    handleRefresh() {
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.el-input-number--medium {
  width: auto;
}
</style>
